<template>
  <el-dialog
    :title="dialogAction == 'new' ? '新建市场人员信息' : '编辑市场人员信息'"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >

    <el-form class="form_container" ref="postForm" label-width="110px" >
      <el-form-item label="人员姓名：">
        <el-input v-model="marketerName" placeholder="请输入人员姓名" :disabled="dialogAction == 'edit'"></el-input>
        <span style="color:red;">{{msgName}}</span>
      </el-form-item>

      <!-- <el-form-item label="手机号码：" v-show="dialogAction == 'new'"> -->
      <el-form-item label="手机号码：" >
        <el-input v-model="marketerMobile" placeholder="请输入11位电话号码" maxlength='11'></el-input>
        <span style="color:red;">{{msgMobile}}</span>
      </el-form-item>

      <el-form-item label="密码">
        <el-input type="password" v-model="marketerPassword" placeholder="请输入6-18位密码" autocomplete="off"></el-input>
        <span style="color:red;">{{msgPassword}}</span>     
      </el-form-item>

      <el-form-item label="确认密码">
        <el-input type="password" v-model="checkPass" placeholder="再次输入密码"  autocomplete="off" ></el-input>
        <span style="color:red;">{{msgCheckPass}}</span>      
      </el-form-item>

      <el-form-item>
        <el-button type="primary"  @click="submitForm">提交</el-button>
        <el-button @click="resetForm('postForm')" :disabled="dialogAction == 'edit'">重置</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { insertmarketer, updatemarketer } from '@/api/marketer'
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  name: 'OpeareteMarketer',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    action: {
      type: String,
      default: 'new'
    },
    editObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    dialog(boolean) {
      this.dialogVisible = boolean
    },
    action(string) {
      this.dialogAction = string
    },
    editObj(obj) {
      if (this.dialogAction == 'edit') {
        this.marketerName = obj.marketerName
        this.marketerMobile = obj.marketerMobile
        // this.marketerPassword = obj.marketerPassword;
        this.isDelete = obj.isDelete
        this.marketerId = obj.marketerId
      }
    },
    marketerName(e){
      if(!(/^[\u4e00-\u9fa5_a-zA-Z]{1,100}$/).test(e) && e != ''){
        this.msgName = '请输入姓名，只能为中文或英文'
      }else{
        this.msgName = ''
      }
    },
    marketerMobile(e){
      if(!(/^1[345789]\d{9}$/).test(e) && e != ''){
        this.msgMobile = '请输入的正确的手机号码'
      }else{
        this.msgMobile = ''
      }
    },
    marketerPassword(e){
      if(e.indexOf(' ') >= 0){
        this.msgPassword = '不允许使用空格作为密码'
      }else if(e.trim().length != 0 && (e.trim().length < 6 || e.trim().length > 18)){
        this.msgPassword = '请输入6-18位密码'
      }else{
        this.msgPassword = ''
      }
    },
    checkPass(e){
      if(e != this.marketerPassword){
        this.msgCheckPass = '两次密码输入不一致'
      }else{
        this.msgCheckPass = ''
      }
    }

  },
  data() {
    return {
      dialogVisible: false,
      dialogAction: 'new',
      marketerId: null,
      marketerName: '',
      marketerMobile: '',
      marketerPassword: '',
      checkPass: '',
      isDelete: 0, // 是否注销，默认值为0 ---> 未注销
      msgName:'',
      msgMobile:'',
      msgPassword:'',
      msgCheckPass:''
    }
  },
  methods: {
    handleClose() {
      const that = this
      this.$confirm('数据未保存，确认关闭？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$emit('cancel')
        this.$emit('reloadList')
        this.marketerName = ''
        this.marketerMobile = ''
        this.marketerPassword = ''
        this.checkPass = ''
        this.msgName = ''
        this.msgMobile = ''
        this.msgPassword = ''
        this.msgCheckPass = ''
      }).catch(() => {})
    },
    submitForm() {
      if(this.marketerPassword.trim() == '' || this.checkPass.trim() == '' || this.marketerName.trim() == '' || this.marketerPassword == '' || this.msgName != '' || this.msgMobile != '' || this.msgPassword != '' || this.msgCheckPass != ''){
        this.$message({
          message: '请输入正确信息',
          type: 'error',
          center: true
        })
        return
      }else if(this.msgName == '' && this.msgMobile == '' && this.msgPassword == '' && this.msgCheckPass == ''){
        const encryptor = new JSEncrypt() // 新建JSEncrypt对象
        const publicKey =
          `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
        encryptor.setPublicKey(publicKey) // 设置公钥
        const regTime = new Date().getTime()
        const rsaPassWord = encryptor.encrypt(regTime + this.marketerPassword) // 对需要加密的数据进行加密

        if (this.dialogAction == 'new') {
          const params = {
            marketerId: this.marketerId,
            marketerName: this.marketerName,
            marketerMobile: this.marketerMobile,
            loginTime: regTime,
            marketerPassword: rsaPassWord,
            isDelete: this.isDelete
          }
          // 新增市场人员信息
          insertmarketer(params).then(res => {
            if (res.code == 0) {
              this.$message({
                message: '人员信息添加成功',
                type: 'success',
                center: true
              })
            }
          })
        } else {
          const params = {
            id: this.marketerId,
            marketerName: this.marketerName,
            marketerMobile: this.marketerMobile,
            loginTime: regTime,
            marketerPassword: rsaPassWord,
            isDelete: this.isDelete
          }
          // 修改市场人员信息
          updatemarketer(params).then(res => {
            if (res.code == 0) {
              this.$message({
                message: '人员信息修改成功',
                type: 'success',
                center: true
              })
            }
          })
        }
        this.$emit('cancel')
        this.$emit('reloadList')
        setTimeout(() => {
          this.marketerName = ''
          this.marketerMobile = ''
          this.marketerPassword = ''
          this.checkPass = ''
          this.checkPass = ''
          this.msgName = ''
          this.msgMobile = ''
          this.msgPassword = ''
          this.msgCheckPass = ''
        }, 300)
      }
    },
    // 点击'重置'按钮
    resetForm() {
      this.marketerName = ''
      this.marketerMobile = ''
      this.marketerPassword = ''
      this.checkPass = ''
    }
  }
}
</script>

<style lang="scss" scoped>
  @import 'src/styles/mixin.scss';
  .form_container {
    width: 500px;
    margin: 0 auto;
  }
</style>


